<template>
	<view>
		<nav-bar title="资讯"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<scroll-view class="news_nav_scroll" scroll-x="true" scroll-with-animation="true" :scroll-into-view="'view' + (classifyIndex - 2)">
			<view class="news_nav">
				<view v-for="(item,index) of classifyList" :key="index" :class="{active: item.objId == classifyId}" @click="onClassify(item,index)"
				 :id="'view' + index">{{item.name}}</view>
			</view>
		</scroll-view>
		<view class="station"></view>
        <mescroll-body ref="mescrollRef" height="-98" @init="mescrollInit" :down="downOption" :up="downOption" @down="downCallback" @up="upCallback">
            <news-item v-for="(item,index) of newsList" :key="item.objId" :item="item" :index="index"></news-item>
        </mescroll-body>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import newsItem from '@/components/module/news_item';
	import MescrollMixin from "@/components/common/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		components: {
			newsItem
		},
		data() {
			return {
				classifyList: [{
					name: "全部",
					objId: ''
				}],
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
				newsList: [],
                classifyId: "",
                classifyIndex: 0,
			};
		},
		computed: {
			...mapState(['currentAddress', "chatScenesInfo"])
		},
		//第一次加载
		onLoad(e) {
			if (e.name) {
				uni.setNavigationBarTitle({
					title: e.name
				});
			}
            if(e.cid){
                this.classifyId = e.cid;
            }
            this.$nextTick(() => {
                this.mescroll.triggerDownScroll();
            });
			this.pageData();
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			onClassify(item,index) {
				this.classifyId = item.objId;
				this.classifyIndex = index;
				this.mescroll.triggerDownScroll();
			},
			// 获取数据
			pageData() {
				let httpData = {};
				if (this.currentAddress.areaId) {
					httpData.areaId = this.currentAddress.areaId;
				}
				this.$http
					.get('api/article/v1/classify', httpData)
					.then(res => {
						this.classifyList = this.classifyList.concat(res);
                        this.$nextTick(() => {
                            this.classifyList.forEach((item,index) => {
                                if(this.classifyId == item.objId){
                                    this.classifyIndex = index;
                                }
                            });
                        })
					});
			},
            /*下拉刷新的回调 */
            downCallback() {
            	//联网加载数据
            	this.loadData(1);
            },
            /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
            upCallback(page) {
            	//联网加载数据
            	this.loadData(page.num);
            },
            loadData(pageNo) {
                let httpData = {
                    pageNo: pageNo,
                    pageSize: 15,
                    cityArticle: true,
                };
                if (this.classifyId) {
                	httpData.classifyId = this.classifyId;
                }
                this.$http
                	.post('api/article/v1/list', httpData,{
                		load:false
                	}).then(res => {
                		uni.stopPullDownRefresh();
                		//方法一(推荐): 后台接口有返回列表的总页数 totalPage
                		this.mescroll.endByPage(res.data.length, res.pages); //必传参数(当前页的数据个数, 总页数)
                		
                		if (pageNo == 1) {
                			this.newsList = res.data;
                		} else {
                			this.newsList = this.newsList.concat(res.data);
                		}
                	}).catch(() => {
                		//联网失败, 结束加载
                		this.mescroll.endErr();
                	});
            },
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.news_nav_scroll {
		width: 100%;
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 2;
		border-bottom: 2rpx solid #f5f5f5;

		.news_nav {
			display: flex;
			background-color: #FFF;

			view {
				flex-shrink: 0;
				height: 80rpx;
				padding: 0 30rpx;
				line-height: 80rpx;
				text-align: center;
				font-size: 28rpx;
				color: #333;
				background-color: #FFF;

				&.active {
					@include theme("font");
					border-bottom: 4rpx solid $themeColor;
				}
			}
		}
	}

	.station {
		height: 80rpx;
	}
</style>
